<template>
  <view class="font">
    <view :class="edit" v-show="is_edit_show">
      <span @click="is_edit">
        <view class="title">{{title}}</view>
        <view class="instructions">{{explain}}</view>
        <view class="right-buttom">
          <view class="mybutton" @click="informedConsent">
            <span>知情同意书</span>
          </view>
          <!-- <button  size="mini" @click.stop="informedConsent">知情同意书</button> -->
        </view>
      </span>
      <view v-show="is_show">
        <view class="Divider"></view>
        <view class="edit_explain" @click="edit_explain">
          <uni-icons type="compose" color="#a8a8a8" size="26"></uni-icons>
          <p>编辑</p>
        </view>
      </view>
    </view>
    <!-- 		<view class="header">
			<view class="title">{{title}}</view>
			<view class="instructions">{{explain}}</view>
			<view class="right-buttom">
				<button  size="mini" @click="informedConsent">知情同意书</button>
			</view>
		</view> -->

    <view class="content">
      <titleCard :titleData="titleData" :formid='formid'></titleCard>
    </view>

    <uv-tabbar :fixed="true" @change="choose">
      <uv-tabbar-item text="添加" icon="plus-circle"></uv-tabbar-item>
      <uv-tabbar-item text="设置" icon="setting"></uv-tabbar-item>
      <uv-tabbar-item text="外观" icon="photo"></uv-tabbar-item>
      <uv-tabbar-item text="预览" icon="eye"></uv-tabbar-item>
      <uv-tabbar-item text="发布" icon="file-text"></uv-tabbar-item>
    </uv-tabbar>
    <!-- 添加题目 -->
    <addTitle ref="refShare"></addTitle>
    <!-- 外观 -->
    <!-- 保存 -->


  </view>
</template>

<script>
  import titleCard from "@/components/common/titleCard/titleCard"
  export default {
    data() {
      return {
        title: "",
        formid: "", /*问卷id*/
        explain: "添加问卷说明",
        is_show: true,
        edit: "edit solid",
        value: 0,
        is_edit_show: true,
        titleData: []
      }
    },
    onLoad: function (option) {
      this.title = option.title;
      this.formid = option.formid
      if (option.temporary_explain) {
        this.explain = option.temporary_explain
      }
      let data = {
        formid: option.formid
      }
      console.log(this.titleData);
      this.$request('/QuestionTitle/getallquestions', 'GET', data)
        .then(res => {
          if (res.data.code == 200) {
            for (var i = 0; i < res.data.data.length; i++) {
              if (res.data.data[i].groupingArray) {
                res.data.data[i].groupingArray = JSON.parse(res.data.data[i].groupingArray)
              }
              if (res.data.data[i].optionArray) {
                res.data.data[i].optionArray = JSON.parse(res.data.data[i].optionArray)
              }
            }
            console.log(res.data.data);
            this.titleData = res.data.data
          }
        })
    },
    onShow: function (e) {
      let pages = getCurrentPages();
      let currPage = pages[pages.length - 1];
      // console.log(currPage.data);
      // 添加填空题后增加数据
      if (currPage.data.temFillData && currPage.data.temFillData !== "") {
		  let trial = this.trialSubject(currPage.data.temFillData['subjectId']);
		if(trial.is){
			currPage.data.temFillData['id'] = this.titleData.length + 1
			this.titleData.push(currPage.data.temFillData)
			currPage.data.temFillData = ""
		}else{
			this.titleData.splice(trial.index,1,currPage.data.temFillData)
			currPage.data.temFillData = ""
		}
      }
      // 添加多选题后增加数据
      else if (currPage.data.mutilData && currPage.data.mutilData !== "") {
		  let trial = this.trialSubject(currPage.data.mutilData['subjectId']);
        currPage.data.mutilData['groupingArray'] = JSON.parse(currPage.data.mutilData['groupingArray'])
        currPage.data.mutilData['optionArray'] = JSON.parse(currPage.data.mutilData['optionArray'])
		if(trial.is){
			currPage.data.mutilData['id'] = this.titleData.length + 1
			this.titleData.push(currPage.data.mutilData)
			currPage.data.mutilData = ""
		}else{
			this.titleData.splice(trial.index,1,currPage.data.mutilData)
			currPage.data.mutilData = ""
		}
      }
      // 添加单选题后增加数据
      else if (currPage.data.singleData && currPage.data.singleData !== "") {
		  currPage.data.singleData['groupingArray'] = JSON.parse(currPage.data.singleData['groupingArray'])
		  currPage.data.singleData['optionArray'] = JSON.parse(currPage.data.singleData['optionArray'])
		  let trial = this.trialSubject(currPage.data.singleData['subjectId']);
		  if(trial.is){
				currPage.data.singleData['id'] = this.titleData.length + 1
				this.titleData.push(currPage.data.singleData)
				currPage.data.singleData = ""
		  }else{
				this.titleData.splice(trial.index,1,currPage.data.singleData)
				currPage.data.singleData = ""
		  }
      }
	  //编辑问卷后返回的数据
	  else if(currPage.data.editExplainData && currPage.data.editExplainData !== ""){
		  let editData = currPage.data.editExplainData
		  this.title = editData.title
		  this.explain = editData.temporary_explain
	  }
    },
    components: {
      titleCard
    },
    methods: {
      is_edit() {
        let classname = this.edit
        if (classname !== "edit") {
          this.edit = "edit"
          this.is_show = false
        } else {
          this.edit = "edit solid"
          this.is_show = true
        }
      },
      /*********** 编辑问卷说明 **************/
      edit_explain() {
        if (this.explain == '添加问卷说明') {
          var myExplain = ""
        } else {
          var myExplain = this.explain
        }
        let name = this.title
        uni.navigateTo({
          url: '/components/create-questionnaire/editExplain?title=' + name + '&formid=' + this.formid + '&explain=' + myExplain
        })
      },
      choose(index) {
        switch (index) {
          case 0:
            this.handleShare()
            break;
          case 1:
            uni.navigateTo({
              url: '/components/setting/index?formid=' + this.formid
            })
            break;
          case 2:
            uni.navigateTo({
              url: "/components/appearance/index?formid=" + this.formid
            })
            break;
          case 3:
            uni.navigateTo({
              url: '/components/preview/preview?formid=' + this.formid+'&type=preview'
            })
            break;
          case 4:
            this.$request('/QuestionnairePageController/QuestionnaireRelease','POST',{formid:this.formid,status:1})
			.then(res=>{
				uni.showModal({
					title:"系统提示",
					content:"发布成功",
					showCancel:false,
					confirmText:"返回首页",
					success: (res) => {
						if(res.confirm){
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
					}
				})
			})
            break;
        }
      },
      handleShare() { 
        this.$refs.refShare.handleShowShare(this.formid);
      },
      // 知情同意书按钮
      informedConsent() {
		  uni.navigateTo({
		  	url:'/components/create-questionnaire/informedConsent?formid='+this.formid
		  })
        // this.$refs.informedConsent.Show(this.formid);
      },
      del(subjectId, index) {
        let data = {
          subjectId: subjectId,
          formid: this.formid
        }
        this.titleData.splice(index, 1)
        this.$request('/QuestionTitle/DeleteQuestion', 'POST', data)
          .then(res => {
            this.titleData.splice(index, 1)
            console.log(res);
          })
      },
	  trialSubject(id){
		  var trial = {
			  is:true,
			  index:''
		  }
		  for (var i = 0; i < this.titleData.length; i++) {
		  	if(this.titleData[i].subjectId == id){
				trial.is = false
				trial.index = i
			}
		  }
		  return trial
	  }
    }
  }
</script>

<style lang="less">
  page {
    background-color: #f3f4f5;
  }

  .header {
    background-color: white;
  }

  .edit {
    background-color: white;
  }

  .title {
    padding: 40rpx 30rpx;
    font-weight: bold;
    font-size: 50rpx;
    color: black;
    /* margin-left: 30rpx; */
  }

  .instructions {
    color: #4d4d4d;
    padding: 0 0 40rpx 30rpx;
    font-size: 35rpx;
  }

  .edit_explain {
    text-align: center;
    background-color: #fafbff;
    color: #a8a8a8;
    font-size: 30rpx;
    height: 110rpx;
  }

  .solid {
    border: 1.2px dashed #80b156;
  }

  .Divider {
    border-top: 1px solid #ccc;
  }

  .right-buttom {
    position: absolute;
    top: 65rpx;
    right: 50rpx;

    button {
      background-color: #80b156;
      color: white;
      font-size: 25rpx;
    }
  }

  .mybutton {
    width: 200rpx;
    height: 60rpx;
    background-color: #80b156;
    color: white;
    font-size: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }
</style>